<template>
    <ul class="button-group">
        <li @click="index = 0">
            <p><img src="../../../../static/images/box.png" /></p>
            <p>{{ dataset[0].name }}</p>
        </li>
        <li @click="index = 1">
            <p><img src="../../../../static/images/sandglass.png" /></p>
            <p>{{ dataset[1].name }}</p>
        </li>
        <li @click="index = 2">
            <p><img class="fix-location" src="../../../../static/images/record-check.png" /></p>
            <p>{{ dataset[2].name }}</p>
        </li>
        <li @click="index = 3">
            <p><img src="../../../../static/images/cancel.png" /></p>
            <p>{{ dataset[3].name }}</p>
        </li>
    </ul>
</template>

<style lang="scss" scoped>
    .button-group {
        display: flex;
        
        li {
            flex: 1;
            
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            
            img {
                width: 3.2rem;
            }

            p {
                margin: 0rem;
                padding: 0rem;
                flex: 0 0 100%;
                text-align: center;
                font-size: 1.4rem;
            }
        }
    }

    .fix-location {
        position: relative;
        right: -3px;
    }
</style>

<script>
    export default {
        // route => path | name, data
        props: ['dataset'],
        data() {
            return {
                index: -1
            }
        },
        methods: {
            eventClickJumpToUrlPath(index) {
                if(!this.dataset[index].route) return;

                var route = this.dataset[index].route;
                if(route.path) {
                    this.$router.push({
                        path: route.path,
                        query: route.data
                    });
                } else if(route.name) {
                    this.$router.push({
                        name: route.name,
                        params: route.data
                    });
                }
            }
        },
        watch: {
            index(nVal, oVal) {
                // console.log(nVal, oVal);
                this.eventClickJumpToUrlPath(nVal);
            }
        }
    }
</script>
